<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端分离开发(前端模板handlebars)</title>
    <style>
        body{font-size: 22px;}
        td{border: 1px solid #666;}
    </style>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/handlebars/dist/handlebars.min.js"></script>
</head>
<body>
    <div id="family-container">
        正在加载...
    </div>
    <script id="family-template" type="template">
            {{#if family}}
                <table>
                    {{#each family}}
                        <tr id="person-{{userId}}">
                            <td>
                                姓名：{{name}}
                            </td>
                            <td>
                                年龄：{{age}}
                            </td>
                            <td>
                                身份证：{{identity}}
                            </td>
                            <td>
                                性别：{{gender}}
                            </td>
                        </tr>
                    {{/each}}
                </table>
            {{/if}}
        </div>
    </script>
    <script>
        var template = $('#family-template').html();
        var context = {
            family: [{
                "userId": "0001",
                "name": "黄鱼",
                "identity": "12312312",
                "gender": "男",
                "age": 16
            },{
                "userId": "0002",
                "name": "黄鱼爸爸",
                "identity": "56546451",
                "gender": "男",
                "age": 22
            },{
                "userId": "0003",
                "name": "黄鱼妈妈",
                "identity": "dsasd001",
                "gender": "女",
                "age": 21
            }]
        };
        var familyHtml = Handlebars.compile(template)(context);
        $('#family-container').html(familyHtml);
    </script>
</body>
</html>